<template>
	<view class="hotContent">
		<view class="head">
			<image src="../../static/home/hot.png" mode="widthFix" style="width: 38rpx"></image>
			<text class="title">热门课程</text>
		</view>

		<view class="hot-con">
			<view v-for="(item, index) in classList" :key="index" class="class-item">
				<image :src="item.img" mode="widthFix" style="width: 300rpx"></image>
				<view class="right-con">
					<text>{{ item.title }}</text>
					<view class="">
						<uni-tag :text="item.hour + '课时'" type="warning" size="mini" />
					</view>
					<view class="price-box">
						<text>￥{{ item.price }}</text>
						<view class="signUpBtn">报名</view>
					</view>
				</view>
			</view>
			<view class="tips">
				<text>没有更多了~</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import img1 from '../../static/home/h_class_1.webp'

	const classList = ref([])

	const geetData = () => {
		classList.value = [{
				title: 'java从入门到精通',
				hour: 1,
				price: '9.90',
				img: img1
			},
			{
				title: 'Python从入门到精通',
				hour: 180,
				price: '990',
				img: '../../static/home/h_class_2.webp'
			},
			{
				title: 'C++从入门到精通',
				hour: 180,
				price: '990',
				img: '../../static/home/h_class_3.webp'
			},
		]
	}

	onMounted(() => {
		geetData()
	})
</script>

<style lang="scss" scoped>
	.hotContent {
		background-color: #fff;
		margin-top: 12px;
		padding: 20px 0;

		.head {
			display: flex;
			padding: 0 24rpx;

			.title {
				flex: 1;
				color: #000;
				font-size: 28rpx;
				margin-left: 12rpx;
			}
		}

		.hot-con {
			padding: 0 40rpx;

			.tips {
				text-align: center;
				font-size: 24rpx;
				color: #999;
				padding: 6px 0;
			}

			.class-item {
				display: flex;
				margin: 10px 0;
				padding: 12px 24rpx;
				box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 3px 1px;

				.right-con {
					margin-left: 30rpx;
					font-size: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;

					.price-box {
						display: flex;
						color: #F88224;
						align-items: center;
						justify-content: space-between;

						.signUpBtn {
							color: #fff;
							background-color: #F88224;
							padding: 6px 38rpx;
							border-radius: 38rpx;
						}
					}
				}
			}
		}
	}
</style>